<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Switch | Onsen UI</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">
  <link rel="stylesheet" href="../../build/css/font_awesome/css/font-awesome.min.css">

  <script src="../../build/js/onsenui.js"></script>

  <style>
    #s5-value {
      padding-left: 6px;
      color: #666;
    }
  </style>

  <script>
    document.addEventListener('change', function(event) {
      if (event.target.id === 's5-switch') {
        document.querySelector('#s5-value').innerHTML = event.target.checked;
      }
    });
  </script>

</head>

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Switch</div>
    </ons-toolbar>

    <ons-list>
      <ons-list-header>Switch</ons-list-header>
      <ons-list-item>
        <label for="s1" class="center">Switch</label>
        <div class="right"><ons-switch input-id="s1"></ons-switch></div>
      </ons-list-item>
      <ons-list-item>
        <label for="s2" class="center">Switch (checked)</label>
        <div class="right"><ons-switch checked input-id="s2"></ons-switch></div>
      </ons-list-item>
      <ons-list-item>
        <label for="s3" class="center">Switch (disabled)</label>
        <div class="right"><ons-switch disabled input-id="s3"></ons-switch></div>
      </ons-list-item>
      <ons-list-item>
        <label for="s4" class="center">Switch (disabled, checked)</label>
        <div class="right"><ons-switch disabled checked input-id="s4"></ons-switch></div>
      </ons-list-item>
      <ons-list-item>
        <label for="s5" class="center">Switch state: <span id="s5-value">false</span></label>
        <div class="right"><ons-switch input-id="s5" id="s5-switch"></ons-switch></div>
      </ons-list-item>
    </ons-list>
  </ons-page>
</body>
</html>
